<template>
  <div>
    <el-drawer
      v-model="dialogVisible"
      title="批量升级"
      width="600px"
    >
      <div class="scene-dialog">
        <el-form 
          ref="formRef"
          :model="formItem" 
          label-width="100"
          label-position="top"
        >
          <el-form-item label="升级包名称" prop="pkgName">
            <el-input v-model="formItem.pkgName" readonly/>
          </el-form-item>

          <el-form-item label="选择设备">
            <el-table 
              :data="tableData.list" 
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="40" />
              <el-table-column prop="equipName" label="设备名称" />
              <el-table-column prop="macCode" label="设备MAC" />
              <el-table-column prop="pkgVersion" label="当前版本号" width="100" />
            </el-table>
          </el-form-item>
        </el-form>
        <OtaSubmitDialog ref="dialog3" />  
      </div>
        
      <template #footer v-if="isDisabled">
        <div class="table-footer">
          共{{tableData.total}}个设备，已选择 <span>{{multipleSelection?.length}}</span> 个设备
        </div>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="createData"
          >提交</el-button>
        </div>
      </template>      
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { otaEquipListBatch, otaUpgradeBatch } from '@/api/collect'
import OtaSubmitDialog from './OtaSubmitDialog.vue'

const isDisabled = ref(true)

const formItem = reactive({
  pkgName: '',
  ver: '',
  id: null,
  batchType: 1,
  ids: []
})

const dialogVisible = ref(false)
const dialogStatus = ref('create')

const tableData = reactive({
  list: [] as any,
  total: 0
})

const getEquipList = (type: any, ver: any) => {
  const params = {
    equipType: type,
    pkgVersion: ver,
  }
  otaEquipListBatch(params).then((res: any)=>{
    tableData.list = res.data
    tableData.total = res.data.length
  })
  .catch((err: any) => {
    console.error('err', err.msg)
  })
}

const formRef = ref<any>(null)

const multipleSelection = ref<any>([])

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val.map(item=>item.id);
}

const emit = defineEmits(['listChange'])

const dialog3: any = ref(null)

const createData = async () => {
  formItem.ids = multipleSelection.value
  otaUpgradeBatch(formItem)
  .then((res: any) => {
    emit('listChange')
    dialogVisible.value = false
    ElMessage.success('创建成功！')
    dialog3.value.formItem.id = res.data
    dialog3.value.pkgInfo.id = formItem.id
    dialog3.value.pkgInfo.name = formItem.pkgName
    dialog3.value.pkgInfo.ver = formItem.ver
    dialog3.value.dialogVisible = true
    dialog3.value.dialogStatus = 'create'
  })
  .catch((err:any) => {
    ElMessage.error('创建失败！'+ err.msg)
  })
}

defineExpose({ dialogVisible, formItem, isDisabled, dialogStatus, getEquipList })
</script>
<style lang="scss" scoped>
.el-upload__tip {
  line-height: 20px;
}
:deep(.el-drawer__header) {
  margin-bottom: 0;
}
.table-footer {
  padding: 10px 0;
  text-align: center;
  span {
    color: #03CCA1;
  }
}
.dialog-footer {
  padding: 10px 0;
  text-align: center;
}
</style>
